<template>
    <div id="app">
        <h1 v-text="msg" ref="title"></h1>
        <button ref="btn" @click="showDOM">点我输出上方的dom元素</button>
        <SchoolComponent ref="sch"/>
    </div>
</template>

<script>
    // 引入组件
    import SchoolComponent from './components/SchoolComponent'

    export default {
        name: 'App',
        components:{SchoolComponent},
        data(){
            return{
                msg: 'Hello Vue'
            }
        },
        methods:{
            showDOM(){
                console.log(this.$refs.title)   //真实dom元素
                console.log(this.$refs.btn)     //真实dom元素
                console.log(this.$refs.sch)     //SchoolComponent组件的实例对象()
            }
        }
    }
</script>